<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    判断是对象还是数组 Object.prototype.toString.call(obj)
<style>
    .imgContent{
        /*border: 1px solid red;*/
        /*text-align: center;*/
        /*line-height: 400px;*/
        /*font-size: 0;*/
        position: relative;
    }
    .imgPosition{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -37.5px;
    }
</style>
<div style='height: 300px' class="imgContent">
    <img class="imgPosition" style="width: 100px;height: 75px" src="img/3.jpg"/>
</div>
<hr>
<!--1.document.getElementsByClassName ie8不兼容-->
<!--2.css内外联样式获取-->
<!--3.判断某元素是否是该元素的子元素-->
<!--4.事件绑定或取消-->
<!--5.mouseover 的3个属性的使用 relatedTarget判断鼠标从什么地方来或者去哪，fromElement判断鼠标从什么地方来，toElement判断鼠标去哪-->
<!--6.获取元素到body的距离 或者到有css定位的父元素的距离-->
<style>
    #div1 {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        color: #999;
    }
</style>

<div id="div1">
    外联css样式获取兼容问题
</div>
<script>
    //    ***  document.getElementsByClassName ie8不兼容
    // 建议采用document.getElementById(a).getElementsByTagName(b)
    (function () {
//        自定义的getElementsByclassName方法
//        e 为document 或者 document.getElementById(a)
        var getElementsByclassName = function (e, d) {
            var f = [];
            var a = e.getElementsByTagName("*");
//            \b为正则表达式 具体解释看w3c
            var c = new RegExp("\\b" + d + "\\b", b);
            for (var b = 0; b < a.length; b++) {
                if (c.test(a[b].className)) {
                    f.push(a[b])
                }
            }
            return f
        }
    })();
    //  外联css样式获取兼容问题
    (function () {
        var div1 = document.getElementById('div1');
        if (div1.currentStyle) {
            //ie 获取外联css样式
            console.info(div1.currentStyle['width']);
//            获取内联css样式
            console.info(div1.style.width)
            console.info('ie')
        } else {
            //除ie 获取外联css样式
            console.info(getComputedStyle(div1, false)['width']);
//            获取内联css样式
            console.info(div1.style.width)
        }
    })();
    //  外联css样式获取兼容问题
</script>
<style>
    #div2 {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
</style>
<hr/>
<div id="div2">
    <div id="child">

    </div>
</div>
<script>
    (function () {
//            判断div2是否包含child 是返回true 否返回false
        var div2 = document.getElementById('div2')
        var child = document.getElementById('child')
        console.info(div2.contains(child))
    })()
</script>
<hr/>
<style>
    #div3 {
        width: 100px;
        height: 100px;
        border: 1px solid green;
    }
</style>
<div id="div3">
    <a>
        <div style="width: 50px ;height: 50px; border: 1px solid black"></div>
        <div></div>
    </a>
</div>
<script>
    (function () {
        var div3 = document.getElementById('div3'),
            div3A = div3.getElementsByTagName('a');
        if (div3.attachEvent) {
            //ie8以下给元素绑定事件的方法
//            div3.detachEvent() 这是解除事件绑定
            div3.attachEvent('onmouseover', function (e) {

                console.info(1)
                trigger()
            })
        } else {
            //            div3.removeEventListener() 这是解除事件绑定
            div3.addEventListener('mouseover', function (e) {
//                此处的e是绑定的事件的属性
                console.info(trigger(div3, "in", e))
            }, false)
        }
        //j 为绑定的事件 如上面绑定的事件中的e
//        f为绑定事件的元素
//        该方法是用来判断鼠标从哪个方向进入元素
//        var getDir = function (j, f) {
//            var j = j || event;
//            var b = this.getStyle(f, "width"),//元素width
//                    d = this.getStyle(f, "height"),//元素height
//                        鼠标位置  - 元素位置 + 滚动条位置 - 元素宽高/2 *元素宽高比例
//            var a = (j.clientX - this.getPos(f).left + this.getScroll().left - (b / 2)) * (b > d ? (d / b) : 1),
//                    k = (j.clientY - this.getPos(f).top + this.getScroll().top - (d / 2)) * (d > b ? (b / d) : 1),
        //此处未看懂具体思路。。。。。。。
//                    g = Math.round((((Math.atan2(k, a) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
//                    c = j.type;
//            return g
//        };

        function trigger(d, a, c) {
            //这3个属性应该是onmouseover，和onmouseout 特有 的 判断鼠标来处和去向
            //relatedTarget判断鼠标从什么地方来或者去哪
            //fromElement判断鼠标从什么地方来
            //toElement判断鼠标去哪
            //以下写法应该是兼容问题
            try {
                if (d.contains(c.relatedTarget)) {
                    return false
                } else {
                    if (!c.relatedTarget) {
                        throw new error()
                    }
                }
            } catch (b) {
                if (a == "in") {
                    if (d.contains(c.fromElement)) {
                        return false
                    }
                } else {
                    if (a == "out") {
                        if (d.contains(c.toElement)) {
                            return false
                        }
                    }
                }
            }
        }
    })()

</script>

<hr>
<style>
    .div4 {
        padding: 20px;
        position: relative;
    }

    .div4 div {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
    }
</style>
<div class="div4">
    <div id="petPos">
    </div>
</div>
<script>
    (function () {
        var div = document.getElementById('petPos');
//        这个方法是获取当前元素距离body的上左距离
        console.info(div.offsetParent + ':offsetLeft')
        var petPos = function (a) {
            var b = {
                left: 0,
                top: 0
            };
//            这个循环是获取当前元素距离body的上左距离
            while (a) {
                //offsetLeft,offsetTop 这两个属性是获取当前元素距离最近有css定位的父元素的距离
                b.left += a.offsetLeft;
                b.top += a.offsetTop;
//                offsetParent是获取当前元素最近的有定位的父元素,根结果为body。body.offsetParent为null
                a = a.offsetParent;
            }
            return b
        };
       // console.info(petPos(div))
//        滚动条距离顶部 和左边的距离
//        var a = {
//            top: document.body.scrollTop || document.documentElement.scrollTop,
//            left: document.body.scrollLeft || document.documentElement.scrollLeft
//        };
//        return a
    })()
</script>
<hr>

<a href="javascript:"onclick="eventBind()">1</a>
<div>
    <a href="javascript:"onclick="cancelEventBind()">2</a>
</div>
<a href="javascript:" onclick="returnTop()">3</a>
<div style="height: 1000px"></div>
<script>
    function f() {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop

        function Callback() {
            console.info(scrollTop)
            if (document.body.scrollTop) {
                document.body.scrollTop = scrollTop
            } else {
                document.documentElement.scrollTop = scrollTop
            }
            
        }
        function returnTop() {
            if (document.body.scrollTop) {
                document.body.scrollTop = 0
            } else {
                document.documentElement.scrollTop = 0
            }
        }
        function eventBind() {
            if (document.attachEvent) {
                document.attachEvent('onscroll', Callback, false)
            } else {
                document.addEventListener('scroll', Callback, false)
            }
        }

        function cancelEventBind() {
            if (document.detachEvent) {
                document.detachEvent('onscroll', Callback)
            } else {
                document.removeEventListener('scroll', Callback)
            }
        }
    }
  f()
</script>


<hr>
<script>
    //  splice 数组截取 [1,2,3,4].splice(2,1) // 3   slice  [1,2,3,4].splice(1,3) [2,3]
    // sort 方法对数组进行一些排序之类的操作  具体看 http://www.w3school.com.cn/js/jsref_sort.asp
    function sortNumber(a,b)
    {
        return a - b
    }

     arr = new Array(6)
    arr[0] = "10"
    arr[1] = "5"
    arr[2] = "40"
    arr[3] = "25"
    arr[4] = "1000"
    arr[5] = "1"

   console.info(arr + "<br />")
    console.info(arr.sort(sortNumber))
    // 数组排序 自己写一个练习 面试题 快速排序
    function arrSort(arr) {
        let index = arr[]
    }
    arrSort([9,5,4,7,6,3,2,1,8])
</script>
</body>
</html>